import React, { useState } from 'react';
import {View, StyleSheet, ScrollView, Dimensions} from 'react-native';
import { Table, Row } from 'react-native-table-component';
import {BarChart, LineChart} from 'react-native-chart-kit';

const SecondScreen = ({ navigation }) => {
    React.useLayoutEffect(() => {
        navigation.setOptions({
            title: 'Weekly Sleep Time',
            headerStyle: {
                backgroundColor: '#0092fe',
            },
            headerTintColor: 'white',
        });
    }, [navigation]);

    const [sleepData, setSleepData] = useState({
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [
            {
                data: [7, 6, 8, 5, 7, 9, 6],
            },
        ],
    });

    const sortedData = [...sleepData.datasets[0].data].sort((a, b) => b - a);

    return (
        <ScrollView contentContainerStyle={styles.container}>
            {/* 上半部分 - 折线图 */}
            <LineChart
                data={sleepData}
                width={Dimensions.get('window').width - 16}
                height={220}
                yAxisSuffix="h"
                chartConfig={{
                    backgroundGradientFrom: '#fff',
                    backgroundGradientTo: '#fff',
                    decimalPlaces: 1,
                    color: (opacity = 1) => `rgba(0, 120, 255, ${opacity})`,
                    labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                    style: {
                        borderRadius: 16,
                    },
                    propsForDots: {
                        r: '6',
                        strokeWidth: '2',
                        stroke: '#0078FF',
                    },
                }}
                bezier
                style={{
                    marginVertical: 8,
                    borderRadius: 16,
                }}
            />

            {/* 柱状图部分 */}
            <View style={styles.barChartContainer}>
                <BarChart
                    data={{
                        labels: sortedData.map(String),
                        datasets: [
                            {
                                data: sleepData.datasets[0].data,
                            },
                        ],
                    }}
                    width={Dimensions.get('window').width - 16}
                    height={220}
                    yAxisSuffix="h"
                    chartConfig={{
                        backgroundGradientFrom: '#fff',
                        backgroundGradientTo: '#fff',
                        decimalPlaces: 1,
                        color: (opacity = 1) => `rgba(0, 120, 255, ${opacity})`,
                        labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                        style: {
                            borderRadius: 16,
                        },
                    }}
                    style={{
                        marginVertical: 8,
                        borderRadius: 16,
                    }}
                />
            </View>
            {/* 表格部分 */}
            <Table borderStyle={{ borderWidth: 2, borderColor: '#c8e1ff' }}>
                <Row
                    data={['Date', 'Sleep Time (hours)']}
                    style={styles.head}
                    textStyle={styles.text}
                />
                {sleepData.labels.map((date, index) => (
                    <Row
                        key={index}
                        data={[date, sleepData.datasets[0].data[index].toString()]}
                        style={styles.row}
                        textStyle={styles.text}
                    />
                ))}
            </Table>
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: {
        flexGrow: 1,
        // alignItems: 'center',
        justifyContent: 'center',
    },
    head: { height: 40, backgroundColor: '#f1f8ff' },
    text: { margin: 6 },
    row: { flexDirection: 'row', backgroundColor: '#FFF1C1' },
    barChartContainer: {
        marginTop: 16,
    },
});

export default SecondScreen;
